<template>
  <div>
    <a-card>
      <a-form :form="form">
        <a-row :gutter="8">
          <a-col :md="8" :sm="12">
            <a-form-item
              label="开课院系"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select
                v-decorator="['kkyxm',
                {
                  rules: [{ required: true, message: '请选择培养单位!' }],
                }]"
                @change="yxChange"
                showSearch
                :filterOption="filterOption"
                :disabled="!!editId"
              >
                <a-select-option
                  v-for="i in selectMenu.yxList"
                  :key="i.id"
                  :value="i.dwh"
                >{{ i.dwh }} {{ i.dwmc }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="课程名称"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select
                v-decorator="['kcbm',
                {
                  rules: [{ required: true, message: '请选择课程!' }],
                }]"
                @change="kcChange"
                showSearch
                :filterOption="filterOption"
                :disabled="!!editId"
              >
                <a-spin v-if="kcLoading" slot="notFoundContent" size="small" />
                <a-select-option
                  v-for="(i,index) in selectMenu.courseList"
                  :key="index"
                  :value="i.kch"
                >{{ i.kch }}{{ i.kcmc }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="上课周类型"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select
                :disabled="!!last"
                v-decorator="['tzhskzlxm',
                {
                  rules: [{ required: true, message: '请输入上课周类型!' }],
                }]"
              >
                <a-select-option v-for="i in TYPE0343" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        
        <p class="sub-title_text">原定上课时间：</p>
        <a-row class="inline-form">
          第
          <a-form-item>
            <a-input-number
                  style="width: 100px"
                  :max="99"
                  v-decorator="['yksz',
                  {
                    rules: [{ required: true, message: '请输入开始周!' }],
                  }]"
                />
            </a-form-item>
            周至
          <a-form-item>
            <a-input-number
                style="width: 100px"
                :max="99"
                v-decorator="['yjsz',
                {
                  rules: [{ required: true, message: '请输入结束周!' }],
                }]"
              />
            </a-form-item>
              周，
          <a-form-item>
              <a-select
                style="width: 100px"
                disabled
                v-decorator="['yskz',
                {
                  rules: [{ required: true, message: '请输入上课周!' }],
                }]"
              >
                <a-select-option v-for="i in TYPE0344" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
              ，第
          <a-form-item>
              <a-select
                style="width: 100px"
                disabled
                v-decorator="['ykskj',
                {
                  rules: [{ required: true, message: '请输入开始课节!' }],
                }]"
              >
                <a-select-option
                  v-for="i in TYPE0331.filter(i => i.code % 2 === 1)"
                  :key="i.id"
                  :value="i.code"
                >{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
              至
          <a-form-item>
              <a-select
                style="width: 100px"
                disabled
                v-decorator="['yjskj',
                {
                  rules: [{ required: true, message: '请输入结束课节!' }],
                }]"
              >
                <a-select-option
                  v-for="i in TYPE0331.filter(i => i.code % 2 === 0)"
                  :key="i.id"
                  :value="i.code"
                >{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
              节，上课地点：
          <a-form-item>
              <a-input
                disabled
                style="width: 100px"
                v-decorator="['yrkjs',
                {
                  rules: [{ required: true, message: '上课地点!' }],
                }]"
              />
            </a-form-item>
        </a-row>
        <p class="sub-title_text">调课时间：</p>
        <a-row class="inline-form">
          第
          <a-form-item>
            <a-input-number
                  style="width: 100px"
                  :max="99"

                  v-decorator="['tzhksz',
                  {
                    rules: [{ required: true, message: '请输入开始周!' }],
                  }]"
                />
            </a-form-item>
            周至
          <a-form-item>
            <a-input-number
                style="width: 100px"
                :max="99"
                v-decorator="['tzhjsz',
                {
                  rules: [{ required: true, message: '请输入结束周!' }],
                }]"
              />
            </a-form-item>
              周，
          <a-form-item>
              <a-select
                style="width: 100px"
                v-decorator="['tzhskz',
                {
                  rules: [{ required: true, message: '请输入上课周!' }],
                }]"
              >
                <a-select-option v-for="i in TYPE0344" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
              ，第
          <a-form-item>
              <a-select
                style="width: 100px"
                v-decorator="['tzhkskj',
                {
                  rules: [{ required: true, message: '请输入开始课节!' }],
                }]"
              >
                <a-select-option
                  v-for="i in TYPE0331.filter(i => i.code % 2 === 1)"
                  :key="i.id"
                  :value="i.code"
                >{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
              至
          <a-form-item>
              <a-select
                style="width: 100px"
                v-decorator="['tzhjskj',
                {
                  rules: [{ required: true, message: '请输入结束课节!' }],
                }]"
              >
                <a-select-option
                  v-for="i in TYPE0331.filter(i => i.code % 2 === 0)"
                  :key="i.id"
                  :value="i.code"
                >{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
              节，上课地点：
          <a-form-item>
              <a-input
                style="width: 100px"
                v-decorator="['tzhjs',
                {
                  rules: [{ required: true, message: '上课地点!' }],
                }]"
              />
            </a-form-item>
            <a-button style="margin-left: 20px" type="primary" @click="showChoose('classroom')">选择教室</a-button>

          <!-- <a-col :md="8" :sm="12">
            <a-form-item
              label="上课周"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select
                :disabled="!!last"
                v-decorator="['tzhskz',
                {
                  rules: [{ required: true, message: '请输入上课周!' }],
                }]"
              >
                <a-select-option v-for="i in TYPE0344" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="开始周"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-input-number
                style="width: 100%"
                :max="99"
                :disabled="!!last && !editId"
                v-decorator="['tzhksz',
                {
                  rules: [{ required: true, message: '请输入开始周!' }],
                }]"
              />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="结束周"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-input-number
                style="width: 100%"
                :max="99"
                :disabled="!!last && !editId"
                v-decorator="['tzhjsz',
                {
                  rules: [{ required: true, message: '请输入结束周!' }],
                }]"
              />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="开始课节"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select
                :disabled="!!last && !editId"
                v-decorator="['tzhkskj',
                {
                  rules: [{ required: true, message: '请输入开始课节!' }],
                }]"
              >
                <a-select-option
                  v-for="i in TYPE0331.filter(i => i.code % 2 === 1)"
                  :key="i.id"
                  :value="i.code"
                >{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="结束课节"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select
                :disabled="!!last && !editId"
                v-decorator="['tzhjskj',
                {
                  rules: [{ required: true, message: '请输入结束课节!' }],
                }]"
              >
                <a-select-option
                  v-for="i in TYPE0331.filter(i => i.code % 2 === 0)"
                  :key="i.id"
                  :value="i.code"
                >{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="8" :sm="12">
            <a-form-item
              label="上课地点"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-input
                disabled
                style="width: 100%"
                v-decorator="['tzhjs',
                {
                  rules: [{ required: true, message: '请输入上课地点!' }],
                }]"
              />
            </a-form-item>
          </a-col> -->
          <!-- <a-col :md="6" :sm="10">
            <a-button style="margin-left: 20px" type="primary" @click="showChoose('classroom')">选择教室</a-button>
          </a-col> -->
        </a-row>
        <a-row>
          <a-form-item
            label="调课原因"
            :labelCol="{span: 2,offset: 1}"
            :wrapperCol="{span: 12, offset: 1}"
          >
            <a-textarea v-decorator="['tkyy',
                {
                  rules: [{ required: true, message: '请输入调课原因!' }],
                }]"/>
          </a-form-item>
        </a-row>

        <!-- <a-card>
          <h3>选择教室</h3>
          <a-row :gutter="8">
            <a-col :md="6" :sm="10">
              <a-form-item v-bind="formItemLayout" label="校区">
                <span class="ant-form-text">{{ pkInfo.xqmc }}</span>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="10">
              <a-form-item v-bind="formItemLayout" label="教室类型">
                <span class="ant-form-text">{{ pkInfo.jslxmc }}</span>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="10">
              <a-form-item v-bind="formItemLayout" label="教室">
                <span class="ant-form-text">{{ pkInfo.classroomNo }}</span>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="10">
              <a-button type="primary" @click="showChoose('classroom')">选择教室</a-button>
            </a-col>
          </a-row>
        </a-card> -->
        
        <template v-if="last || editId">
          <a-card style="margin: 10px 0;">
            <h3>教师</h3>
            <a-row :gutter="8">
              <a-col :md="8" :sm="12">
                <a-form-item v-bind="formItemLayout" label="所属单位">
                  <span class="ant-form-text">{{ pkInfo.jsssyx }}</span>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="12">
                <a-form-item v-bind="formItemLayout" label="教师">
                  <span class="ant-form-text">{{ pkInfo.rkjsmc }}</span>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="12">
                <a-form-item
                  :labelCol="{span: 9,offset: 1}"
                  :wrapperCol="{span: 13, offset: 1}"
                  label="任课教师职工号"
                >
                  <span class="ant-form-text">{{ pkInfo.rkjszgh }}</span>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="12">
                <a-form-item v-bind="formItemLayout" label="教师职称">
                  <span class="ant-form-text">{{ pkInfo.zcmc }}</span>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
        </template>

        <a-form-item :wrapperCol="{span: 39, offset: 5}" style="margin-top: 30px;">
          <a-button
            :loading="loading"
            type="primary"
            @click="toNext"
          >{{ (!last && !editId) ? '下一步' : '提交申请' }}</a-button>
          <a-button v-if="last" style="margin-left: 8px" @click="toLast">上一步</a-button>
          <a-button style="margin-left: 8px" @click="goBack">返回列表</a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <!--     <div class="ant-pro-footer-toolbar">
      <a-button style="float: right;margin-top: 10px;" @click="goBack">返回列表</a-button>

       <a-button style="margin-left: 50px;" type="primary" @click="toNext">{{ editId ? '提交保存' : '下一步' }}</a-button>
       <a-button style="float: right;margin-top: 10px;" @click="">{{'上一步'}}</a-button>
    </div>-->

    <choose-modal
      ref="choose"
      :visible="chooseVisible"
      :title="chooseTitle"
      :TYPE0126="TYPE0126"
      :type="chooseType"
      :editId="editId"
      :authYxList.sync="selectMenu.yxList"
      @cancel="chooseVisible = false"
      @updatePk="updatePk"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import DetailList from "~/tool/DetailList";
import chooseModal from "./components/chooesModal";
const DetailListItem = DetailList.Item;

export default {
  data() {
    return {
      form: this.$form.createForm(this),
      selectMenu: {},
      kcLoading: false,
      chooseVisible: false,
      chooseType: null,
      chooseTitle: "",
      editId: null,
      last: false,
      loading: false,
      pkInfo: { xkrsxdMin: 3 },
      formItemLayout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 14 }
      }
    };
  },
  components: { DetailList, DetailListItem, chooseModal },
  computed: {
    ...mapState({
      TYPE0125: state => state.app["TYPE0125"],
      TYPE0126: state => state.app["TYPE0126"],
      TYPE0072: state => state.app["TYPE0072"],
      TYPE0343: state => state.app["TYPE0343"],
      TYPE0344: state => state.app["TYPE0344"],
      TYPE0331: state => state.app["TYPE0331"] || []
    })
  },
  created() {
    this.$store.dispatch("app/setDictionary", "TYPE0125");
    this.$store.dispatch("app/setDictionary", "TYPE0126");
    this.$store.dispatch("app/setDictionary", "TYPE0072");
    this.$store.dispatch("app/setDictionary", "TYPE0343");
    this.$store.dispatch("app/setDictionary", "TYPE0344");
    this.$store.dispatch("app/setDictionary", "TYPE0331");
    this.initSelectMenu();
    this.editId = this.$route.query.id;
    this.getInfo(this.editId);
  },
  methods: {
    initSelectMenu() {
      let allRequest = [this.$api.base.collegeAll()];
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          yxList: res[0].data
        };
      });
    },
    getInfo(id) {
      this.$api.cultivate.pkDetail(id).then(res => {
        this.pkInfo = res.data;
        let infoData = res.data;
        if (infoData.kkyxm) {
          this.yxChange(infoData.kkyxm);
        }
        let keys = Object.keys(this.form.getFieldsValue());
        let obj = {};

        keys.forEach(key => {
          obj[key] = infoData[key];
        });

        obj.yjskj = infoData.jskj;
        obj.yjsz = infoData.jsz;
        obj.ykskj = infoData.kskj;
        obj.yksz = infoData.ksz;
        obj.yskz = infoData.skz;
        obj.yrkjs = infoData.classroomNo;
        
        obj.tzhjskj = infoData.jskj;
        obj.tzhjsz = infoData.jsz;
        obj.tzhkskj = infoData.kskj;
        obj.tzhksz = infoData.ksz;
        obj.tzhskz = infoData.skz;
        obj.tzhjs = infoData.classroomNo;
        obj.tzhskzlxm = infoData.skzlxm;
        this.form.setFieldsValue(obj);
      });
    },
    filterOption(value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1;
    },
    yxChange(code) {
      this.form.setFieldsValue({ kcbm: "" });
      this.$set(this.selectMenu, "courseList", []);
      if (code) {
        this.kcLoading = true;
        this.$api.cultivate
          .courseAll({ kcssyxm: code })
          .then(res => {
            this.$set(this.selectMenu, "courseList", res.data);
          })
          .finally(() => {
            this.kcLoading = false;
          });
      } else {
        this.$set(this.selectMenu, "courseList", []);
      }
    },
    kcChange(kch) {
      let kc = this.selectMenu.courseList.find(kc => {
        return kc.kch === kch;
      });
      this.form.setFieldsValue({
        xs: kc.zxs,
        xf: kc.xf
      });
    },
    toLast() {
      this.last = false;
    },
    toNext() {
      this.$confirm({
        title: "提示",
        content:
          "提交申请后，需要院系领导和培养办审核，审核期间不能再次修改，学生不能退课不能选择和调课时间冲突的课程。",
        centered: true,
        onOk: () => {
          this.postSave();
        },
        onCancel: () => {}
      });
    },
    postSave() {
      this.form.validateFields((err, values) => {
        if (err) {
          return;
        }
        this.loading = true;
        let params = Object.assign(
          {
            pkxxId: this.editId,
            tzhjs: this.pkInfo.classroomNo,
            dsbh: this.pkInfo.rkjszgh
          },
          values
        );
        this.$api.cultivate
          .tkAdd(params)
          .then(res => {
            this.$message.success(res.msg);
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },
    showChoose(type) {
      this.$refs.choose.searchForm = Object.assign(
        {},
        this.form.getFieldsValue()
      );
      // this.$refs.choose.teacherNote = this.pkInfo.rkjssm
      this.chooseVisible = true;
      this.chooseType = type;
      this.chooseTitle = type === "teacher" ? "选择教师" : "选择教室";
    },
    updatePk(data) {
      this.pkInfo = Object.assign(this.pkInfo, data, {tzhjs: data.classroomNo});
      this.form.setFieldsValue({tzhjs: data.classroomNo})
    },
    goBack() {
      this.$router.back();
    }
  }
};
</script>

<style lang="less">
.sub-title_text{
  font-size: 16px;
  font-weight: bold;
  padding-left: 10px;
}
.inline-form {
  color: rgba(0, 0, 0, 0.85);
  line-height: 40px;
  padding-left: 20px;
  .ant-form-item{
    display: inline-block;
  }
}
</style>
